<template>
  <div class="fullcontainer">
    <dv-loading v-if="loading">
      <div color-white>Loading...</div>
    </dv-loading>
    <div class="header"><HeaderItem /></div>
    <div class="main">
      <div class="left">
        <div class="lcrtitem">
          <ItemBorder title="作业风险分级管控"><DpLeftItem1 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="设备风险分级管控"><DpLeftItem2 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="职业健康与环境"><DpLeftItem3 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="事故事件"><DpLeftItem4 /></ItemBorder>
        </div>
      </div>
      <div class="center">
        <div class="lcrtitem2"><DpCenterItem1 /></div>
        <div class="lcrtitem2">
          <ItemBorder2 title="班组动态考评"><DpCenterItem2 /></ItemBorder2>
        </div>
      </div>
      <div class="right">
        <div class="lcrtitem">
          <ItemBorder title="未闭环隐患"><DpRightItem1 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="隐患奖励"><DpRightItem2 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="违章信息"><DpRightItem3 /></ItemBorder>
        </div>
        <div class="lcrtitem">
          <ItemBorder title="隐患统计分析"><DpRightItem4 /></ItemBorder>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderItem from '@views/dprevent/headeritem.vue'
import ItemBorder2 from '@comp/ItemBorder2/index.vue'
import ItemBorder from '@views/website/itemborder.vue'
import DpCenterItem1 from '@views/dprevent/DpCenterItem1.vue'
import DpCenterItem2 from '@views/dprevent/DpCenterItem2.vue'
import DpLeftItem1 from '@/views/dprevent/DpLeftItem1.vue'
import DpLeftItem2 from '@views/dprevent/DpLeftItem2.vue'
import DpLeftItem3 from '@views/dprevent/DpLeftItem3.vue'
import DpLeftItem4 from '@views/dprevent/DpLeftItem4.vue'
import DpRightItem1 from '@/views/dprevent/DpRightItem1.vue'
import DpRightItem2 from '@/views/dprevent/DpRightItem2.vue'
import DpRightItem3 from '@/views/dprevent/DpRightItem3.vue'
import DpRightItem4 from '@/views/dprevent/DpRightItem4.vue'
export default {
  name: 'WebSite',
  components: {
    ItemBorder,
    ItemBorder2,
    HeaderItem,
    DpCenterItem1,
    DpCenterItem2,
    DpLeftItem1,
    DpLeftItem2,
    DpLeftItem3,
    DpLeftItem4,
    DpRightItem1,
    DpRightItem2,
    DpRightItem3,
    DpRightItem4
  },
  data() {
    return {
      loading: false
    }
  }
}
</script>
<style lang="scss" scoped>
.fullcontainer {
  width: 100%;
  height: 100vh;
}

.header {
  width: 100%;
  height: 80px;
}

.main {
  display: flex;
  height: calc(100% - 80px);
  .left {
    width: 25%;
    display: flex;
    flex-direction: column;
  }

  .center {
    width: 50%;
  }

  .centeritem {
    width: 50%;
    height: 100%;
  }

  .right {
    width: 25%;
  }
  .lcrtitem {
    padding: 0 2px 5px;
    height: calc(25% - 5px);
    overflow: hidden;
  }
  .lcrtitem2 {
    padding: 0 2px 5px;
    height: calc(50% - 10px);
    display: flex;
    overflow: hidden;
  }
}
</style>
